<template>
    <div>
<h1>Vue的基本语法</h1>
<ol>
    <li>任何一个vue文件由三部分组成:template，script，style</li>
    <li>Vue使用的html模板语法</li>
    <li>Html模板语法</li>
    <li>第一:{{  }}插值语法,第二Vue插令</li>
    <li>num:{{ num }}</li>
</ol>
<p v-for="(item,index) in arr":key=index>
    {{ index }}---{{ item }}
</p>
<p>{{ obj }}</p>
<p>name:{{ obj.name }}</p>

<p v-for="(item,index) in obj":key="item">{{index}}---{{ item }}</p>
<hr/>
<ul>
    <li v-for="item in arrObj":key="item.id">{{ item.name }}--{{ item.age }}</li>
</ul>
<input type="button" class="btn btn-danger" value="修改数据" v-on:click="fn">
<input type="button" class="btn btn-danger" value="修改数据" @click="fn">
<input type="button" class="btn btn-danger" value="修改数组" @click="fn1">
<input type="button" class="btn btn-danger" value="修改对象" @click="fn2">
<input type="button" class="btn btn-danger" value="修改对象" @click="fn3">
<h3>改l一下代码</h3>
    </div>
</template>

<script setup lang="ts">
//数据驱动试图
//在Vues说明数据时一定说明成响应时数据---->数据变视图变
//ref:一般用来说明基本类型：数值类型，字符串"3sdds"'sds'
//reactive:一般用来说明复查类型对象和数组
import{reactive, ref} from 'vue'
let num = ref(101)
let arr = reactive([1,2,4,5,6])//数组
//对象
let obj = reactive({
name:"张三",
age:20
})

let arrObj=reactive([
    {id:1,name:'张三',age:20},
    {id:2,name:'李四',age:21},
    {id:3,name:'王五',age:22},
    {id:4,name:'赵六',age:23},
    {id:4,name:'张七',age:27},
])

const fn = ()=>{
    num.value++;

   console.log(num.value);
   

}
const fn1 = ()=>{
    arr[3]=100
}

const fn2 = ()=>{
    obj.name='李四'
}
const fn3=()=>{
    arrObj[3].age=100
    arrObj[3].name='王八'
}
</script>

<style scoped>

</style>